<template>
    <div class="goodsinfo_container">

        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        >
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>

        <!-- 商品轮播图 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <Swiper :swipeData="swiperData" :isfull="true"></Swiper>
            </div>
        </div>

        <!-- 商品购买 -->
        <div class="mui-card">
            <div class="mui-card-header">{{ infoData.title }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>￥{{ infoData.market_price }}</del> 销售价：<span class="now_price">￥{{ infoData.sell_price }}</span>
                    </p>
                    <p>购买数量：
                        <!-- 通过事件调用机制 @ ，父组件向子组件传递方法 -->
                        <Numbox @getCount="getSelectedCount" :max="infoData.stock_quantity"></Numbox>
                    </p>
                    <p>
                        <mt-button size="small" type="primary">立即购买</mt-button>
                        <mt-button @click="addToShopCar()" size="small" type="danger">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>

        <!-- 商品参数 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>库存情况：{{ infoData.stock_quantity }} 件</p>
                    <p>上架时间：{{ infoData.add_time }}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button @click="goDesc(id)" type="primary" size="large" plain>图文介绍</mt-button>
                <mt-button @click="goComment(id)" type="danger" size="large" plain>商品评论</mt-button>
            </div>
        </div>

    </div>    
</template>

<script>

import Swiper from "../subcomponents/swiper.vue";
import Numbox from "../subcomponents/goodsinfo_numbox.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      swiperData: {}, // 轮播图
      infoData: {}, // 商品信息
      ballFlag: false, // 控制小球隐藏和显示的标示符
      selectedCount: 1 // 保存用户选中的商品数量，默认用户选中一个
    };
  },
  methods: {
    getSwiper() {
      // 获取 轮播图
      this.$http
        .jsonp(
          "?s=App.Table.Query&model_name=Carousel&id=1&app_key=4F07D528AB07EE72BD7F7C9263BD6705"
        )
        .then(
          result => {
            // console.log(result)
            if (result.body.ret === 200) {
              this.swiperData = result.body.data.list;
              // 如果子组件需要的字段和传递的字段不一致，需要通过 forEach 循环遍历 result.body.data.list 添加子组件需要的字段
            }
          },
          err => {
            Toast("获取数据失败");
          }
        );
    },
    getGoodsInfo() {
      // 获取商品详情
      this.$http
        .jsonp(
          '?s=App.Table.FreeFindOne&model_name=goodslist&where=[["id","="," ' +
            this.id +
            ' "]]&app_key=4F07D528AB07EE72BD7F7C9263BD6705'
        )
        .then(result => {
          if (result.body.ret === 200) {
            // console.log(result.body);
            this.infoData = result.body.data.data;
          } else {
            Toast("获取详情失败");
          }
        });
    },
    goDesc(id) {
      // 使用编程式导航
      this.$router.push({ name: "goodsdesc", params: { id } });
    },
    goComment(id) {
      this.$router.push({ name: "goodscomment", params: { id } });
    },
    addToShopCar() {
      // 添加到购物车
      this.ballFlag = !this.ballFlag; // 小球显示
      // 拼接出一个要保存到 store 中 car 数组里的 商品信息对象
      var goodsinfo = {
        id: this.id,
        count: this.selectedCount,
        price: this.infoData.sell_price,
        stock: this.infoData.stock_quantity,  // 库存
        selected: true,
      };
      // 调用 store 中的 mutations 来将商品加入到购物车
      this.$store.commit('addToCar', goodsinfo)
    },
    beforeEnter(el) {
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
      el.offsetWidth;
      // 因为分辨率和测试的时候不一样，或者滚动条有一定的滚动距离之后，动画的结束位置就会出现偏差
      // 解决方式：动态获取小球 和 徽标 的位置，先得到 徽标的 横纵坐标 在得到小球的 横纵坐标，然后 y 值求差， x 值也求差，得到的结果，就是横纵坐标要位移的位置

      // 获取小球在页面中的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      // 获取徽标在页面中的位置
      const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();

      const xDist = badgePosition.left - ballPosition.left;
      const yDist = badgePosition.top - ballPosition.top;

      el.style.transform = `translate(${xDist}px, ${yDist}px)`; // 使用 ES6 的 `` 做字符串拼接
      el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
      done(); // 调用结束函数
    },
    afterEnter(el) {
      //结束函数
      this.ballFlag = !this.ballFlag;
    },
    getSelectedCount(count) {
      // 当子组件把选中的数量传递给父组件的时候，把选中的值保存到 data 上
      this.selectedCount = count;
    }
  },
  created() {
    this.getSwiper();
    this.getGoodsInfo();
  },
  components: {
    Swiper,
    Numbox
  }
};
</script>

<style lang="less" scoped>
.goodsinfo_container {
  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 380px;
    left: 150px;
  }
}
</style>
